<template>
  <div class="flex flex-col min-h-screen">
    <!-- 顶部导航 -->
    <Header @toggle-sidebar="toggleSidebar" />

    <!-- 主要内容区域 -->
    <main class="flex-grow flex">
      <!-- 侧边栏 -->
      <Sidebar :is-open="sidebarOpen" @close-sidebar="sidebarOpen = false" />

      <!-- 内容区 -->
      <section class="flex-grow p-6 md:p-8">
        <div class="max-w-5xl mx-auto bg-white rounded-lg shadow-md p-6">
          <router-view />
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <Footer />
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Sidebar from './components/Sidebar.vue'
import Footer from './components/Footer.vue'

export default {
  components: {
    Header,
    Sidebar,
    Footer
  },
  data() {
    return {
      sidebarOpen: false
    }
  },
  methods: {
    toggleSidebar() {
      this.sidebarOpen = !this.sidebarOpen
    }
  }
}
</script>